<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :on-remove="handleRemove"
    :accept="accept"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    <!-- <div slot="tip" class="el-upload__tip">只能上传JPG/JPEG/PNG文件，且不超过3M,建议1000px*1000px以下</div> -->
  </el-upload>
</template>

<script>
import { Warning } from "../utils/notification";

// const Address = require('../utils/url');
//上传头像组件
export default {
  name: "UploadAvatar",
  props: {},
  data() {
    return {
      imageUrl: "",
      action: "http://devicedata.wadd.vip/api/v1.node/uploadImg",
      accept: "image/jpg,image/jpeg,image/png"
      // fileList: []
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        this.imageUrl = res.data.src;
      } else {
        this.imageUrl = "";
      }
      this.$emit("getImage", this.imageUrl);
    },
    // 图片上传尺寸大小检验
    beforeAvatarUpload(file) {
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const is3M = file.size / 1024 / 1024 < 3; // 限制小于3M
      // 限制图片尺寸为1000*1000,未生效
      /*const width = 1000;
        const height = 1000;
        const isSize = new Promise(function (resolve, reject) {
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = function () {
            const valid = img.width <= width && img.height <= height;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(() => {
          return file;
        }, () => {
          Warning(`图片尺寸限制为${width}px * ${height}px以下!`);
          return Promise.reject();
        });*/
      if (!is3M) {
        Warning("图片大小不能超过 3MB!");
        return false;
      }
      if (!isJPG && !isJPEG && !isPNG) {
        Warning("图片只能是 JPG/JPEG/PNG 格式!");
        return false;
      }
      // return isSize&&is3M && isJPG && isJPEG && isPNG;
    },
    //清空
    clear() {
      this.imageUrl = "";
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    }
  },
  watch: {
    img: {
      handler(val) {
        this.imageUrl = val;
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    }
  }
};
</script>

<style scoped>
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader >>> .el-upload__tip {
  line-height: normal;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
